<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display:flex">
        <div class="tree">
          <el-tree :data="treeData" accordion :expand-on-click-node="false" class="tree-line"  :indent="0"  @node-expand="changevompany" @node-click="treeSelect">
            <span slot-scope="{ node }" class="custom-tree-node">
              <!-- 	<icon :name="data.icon" :w="22" :h="14" style="padding: 0 4px;"></icon> -->
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px;">原物料名称</span>
                  <el-input v-model="tableParam.rawName" style="width: 240px;" clearable />
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">状态</span>
                  <el-select v-model="tableParam.maintainStatus" placeholder="请选择">
                    <el-option label="正常" :value="1"></el-option>
                    <el-option label="审核中" :value="2"></el-option>
                    <el-option label="不通过" :value="3"></el-option>
                  </el-select>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card" style="padding-top:10px">
            <div class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <el-link v-if="item.label == '份额详情'" class="table_link" :underline="false" @click="changitem(scope.row, 'LotAllots')">份额详情</el-link>
                      <span v-else-if="item.label == '状态'">{{ scope.row.maintainStatus == 1 ? '正常' : scope.row.maintainStatus == 2 ? '审核中' : '不通过' }}</span>
                      <span v-else-if="item.label == '操作'">
                        <el-link v-if="scope.row.maintainStatus == 2 " class="table_link" :underline="false" @click="changestatus(scope.row,1)">通过</el-link>
                        <el-link v-if="scope.row.maintainStatus == 2 " class="table_link" :underline="false" @click="changestatus(scope.row,3)">未通过</el-link>
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 份额审批 -->
    <el-dialog v-dialogDrag :visible.sync="elDialog.indexOf(activeDialog) == 0" width="680px" :close-on-click-modal="false" :before-close="resetDialog">
      <span slot="title" class="dialog-title">份额维护</span>
      <div class="dialoginfo" style="padding-top: 0;">
        <div class="dialoginfo-title">
          <div>
            <span>公司：</span>
            <span>{{ low.company }}</span>
          </div>
          <div>
            <span>站点：</span>
            <span>{{ low.station }}</span>
          </div>
          <div>
            <span>原物料名称：</span>
            <span>{{ low.rawName }}</span>
          </div>
        </div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableDialog" tooltip-effect="dark">
          <el-table-column label="原物料合同编号" align="center" prop="contractNo"></el-table-column>
          <el-table-column label="供应商" align="center" prop="supplier"></el-table-column>
          <el-table-column label="份额（%）" align="center" prop="lotNum"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetDialog">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  getLotAllots,
  auditLot,
} from "@/api/GHnumber/shareaudit.js";
import { getUserAutList } from "@/api/common.js";
export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表格数据*/
      table: [
        { label: "原物料名称", width: "auto", prop: "rawName", status: true },
        { label: "份额详情", width: "auto", prop: "", status: true },
        { label: "提交时间", width: "auto", prop: "updateTime", status: true },
        { label: "状态", width: "auto", prop: "", status: true },
        { label: "操作", width: "120", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 1,
      treeData: [],
      elDialog: ["LotAllots", "auditLot"],
      activeDialog: "",
      low: {},
      tableDialog: [],
      DialogParam: {
        page: 1,
        pageSize: 9,
      },
      Dialogtotal: null,
    };
  },
  async created() {
    this.arr2 = await getUserAutList()
    this.tableParam = { ...this.tableParam, rawName: "", maintainStatus: "" };
    this.gettableData();
  },
  /*
   *copy(data)深拷贝数据,返回拷贝完的数据
   *gettableData获取列表数据
   *load下载
   *SortNum保持序列号
   * UpdateOrDelete禁用，启用，删除
   * submitFromDate保存更新数据
   */
  methods: {
    init() {
      /*重置数据*/
      this.tableParam.rawName = "";
      this.tableParam.maintainStatus = "";
      this.gettableData();
    },
    treeSelect(res) {
      if (res.list) {
        this.tableParam.stationId = "";
        return;
      }
      this.tableParam.stationId = res.value;
      this.gettableData();
    },
    changevompany(res) {
      this.tableParam.stationId = "";
      this.tableParam.companyId = res.value;
    },
    changestatus(low, type) {
      console.log(low, type);
      if (type == 3) {
        this.$prompt("请输入拒绝审批意见", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
        })
          .then(({ value }) => {
            auditLot({ id: low.id, maintainStatus: type, remark: value }).then(
              () => {
                this.gettableData();
              }
            );
          })
          .catch(() => { });
        return;
      }
      auditLot({ id: low.id, maintainStatus: type, remark: "" }).then(() => {
        this.gettableData();
      });
    },
    /*份额审批记录*/
    changitem(item, index) {
      this.activeDialog = index;
      this.low = item;
      getLotAllots({ id: item.id }).then((res) => {
        this.tableDialog = res.data;
      });
    },
    resetDialog() {
      this.activeDialog = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo-title {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 20px 0;
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
